import React, { Component } from 'react'
import { connect } from 'react-redux'
import {tab} from '../../../redux/action'
export class TuijianUI extends Component {
    render() {
        // console.log(this.props);
        return (
            <div className='Tuijian'>
                <ul>
                    {
                        this.props.list.map((item, index) => {
                            return (
                                <li key={index}>
                                    <div className='left'>
                                        <img src={item.img} alt="" />
                                        <div>
                                            <h3>{item.name}</h3>
                                            <span>{item.zym}</span>
                                        </div>
                                    </div>
                                    <div className='right'>
                                        <button onClick={()=>{this.tab(item.id,item.isGuanzhu)}} className={item.isGuanzhu?'active':null}>{item.isGuanzhu?'已关注':'未关注'}</button>
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
    tab=(id,isGuanzhu)=>{
        this.props.tab({id,isGuanzhu:!isGuanzhu})
    }
}

const mapStateToProps = (state) => {
    // console.log('state', state);
    return {
        list: state.list
    }
}

const mapDispatchToProps = {
    tab:(value)=>{
        return tab(value)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(TuijianUI)